<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        Text,
        createVNode,
        h,
        render,
        Fragment,
      } from "../js/runtime-dom/index.js";
      // import {
      //   Text,
      //   Fragment,
      //   createVNode,
      //   render,
      //   h,
      //   proxyRefs,
      //   toRefs,
      //   reactive,
      //   effect,
      //   watch,
      //   watchEffect,
      //   computed,
      //   ref,
      //   toRef,
      //   createRenderer,
      // } from "../../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js ";

      // const app = document.getElementById("app"); //创建app元素对象，作为游戏应用的主体内容
      // const VueComponent = {
      //   data() {
      //     return { age: 0, a: 0 };
      //   },
      //   render(proxy) {
      //     // 允许编写模板的 -> effect
      //     setTimeout(() => {
      //       proxy.age++;
      //       proxy.a++;
      //     }, 1000);
      //     return h(Fragment, [h(Text, [proxy.age, proxy.a])]);
      //   },
      // };
      // render(h(VueComponent), app);

      // props 是响应式的，但是是浅的
      // attrs 在开发环境下 是响应式， 生产环境是非响应式的
      // attrs = 用户传递props - propsOptions，自己无法消费的数据可以快速传递给其他组件
      const app = document.getElementById("app"); //创建app元素对象，作为游戏应用的主体内容
      const VueComponent = {
        data() {
          return { age: 0, a: 0 };
        },
        props: {
          b: Number,
        },
        render(proxy) {
          // 允许编写模板的 -> effect
          console.log(proxy);
          // setTimeout(() => {
          //     proxy.age++
          //     proxy.age++
          // }, 1000)

          return h(Fragment, [h(Text, proxy.age), h(Text, proxy.a)]);
        },
        // 属性分为两种 第一种：props 第二种attrs
      };
      render(h(VueComponent, { a: { a: 1 }, b: 2, c: 1 }), app);
    </script>
  </body>
</html>
